import { createRouter, createWebHistory, RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import ApiDemo from '../views/ApiDemo.vue'
import { isAuthenticated } from '../utils/auth'

// 扩展路由 meta 类型定义
declare module 'vue-router' {
  interface RouteMeta {
    // 是否需要登录（鉴权）
    requiresAuth?: boolean
    // 需要的角色（角色权限控制）
    roles?: string[]
    // 需要的权限（功能权限控制）
    permissions?: string[]
    // 页面标题
    title?: string
  }
}

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        title: '首页',
        requiresAuth: false // 首页不需要登录
      }
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      meta: {
        title: '关于',
        requiresAuth: false // 关于页不需要登录
      }
    },
    {
      path: '/api-demo',
      name: 'ApiDemo',
      component: ApiDemo,
      meta: {
        title: 'API 演示',
        requiresAuth: true // 需要登录才能访问
        // roles: ['admin'], // 如果需要特定角色，可以在这里配置
        // permissions: ['api:view'], // 如果需要特定权限，可以在这里配置
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('../views/Login.vue'),
      meta: {
        title: '登录',
        requiresAuth: false
      }
    }
  ]
})

// 全局前置守卫 - 实现路由鉴权
router.beforeEach(
  (
    to: RouteLocationNormalized,
    from: RouteLocationNormalized,
    next: NavigationGuardNext
  ) => {
    console.log('🔐 [路由守卫] 检查路由权限')
    console.log('  目标路由:', to.path)
    console.log('  来源路由:', from.path)
    console.log('  路由 meta:', to.meta)

    // 设置页面标题
    if (to.meta.title) {
      document.title = `${to.meta.title} - Vue3 App`
    }

    // 检查是否需要鉴权
    if (to.meta.requiresAuth) {
      // 检查用户是否已登录
      if (!isAuthenticated()) {
        console.log('❌ [路由守卫] 未登录，跳转到登录页')
        // 保存要跳转的路由，登录成功后可以跳转回去
        next({
          path: '/login',
          query: { redirect: to.fullPath } // 保存完整路径，包含查询参数
        })
        return
      }

      // 如果需要角色权限检查
      if (to.meta.roles && to.meta.roles.length > 0) {
        // 这里可以实现角色检查逻辑
        // const userRoles = getUserInfo()?.roles || []
        // const hasRequiredRole = to.meta.roles.some(role => userRoles.includes(role))
        // if (!hasRequiredRole) {
        //   next({ path: '/403' }) // 跳转到无权限页面
        //   return
        // }
      }

      // 如果需要功能权限检查
      if (to.meta.permissions && to.meta.permissions.length > 0) {
        // 这里可以实现权限检查逻辑
        // const hasRequiredPermission = to.meta.permissions.every(permission => hasPermission(permission))
        // if (!hasRequiredPermission) {
        //   next({ path: '/403' }) // 跳转到无权限页面
        //   return
        // }
      }

      console.log('✅ [路由守卫] 鉴权通过，允许访问')
    } else {
      console.log('ℹ️ [路由守卫] 该路由不需要鉴权，直接放行')
    }

    // 如果已登录用户访问登录页，重定向到首页
    if (to.path === '/login' && isAuthenticated()) {
      console.log('⚠️ [路由守卫] 已登录用户访问登录页，重定向到首页')
      next('/')
      return
    }

    // 放行
    next()
  }
)

// 全局后置钩子（可选，用于页面访问统计等）
router.afterEach((to: RouteLocationNormalized) => {
  console.log('✅ [路由守卫] 路由跳转完成:', to.path)
})

export default router

